window.onload = function () {
    index = location.search;/* 获取域名中带的数据 */
    if (index == null)/* 判断是添加页面还是编辑页面 有索引时为编辑页面 */
        return /* 编辑页面不进行以下操作 */
    index = index.slice(index.indexOf("=") + 1)/* 截取真正有用的数据 */
    result = JSON.parse(localStorage.getItem(index))/* 从本地浏览器储存中获取问卷数据 */
    document.querySelector("#titleContent").innerHTML = result.title/* 渲染问卷标题 */
    for (i = 1; i <= result.len; i++) { /* 循环渲染问卷中的每个问题 */
        if (result[i].type == "单选题") {/* 先对问题类型进行判断 */
            var str = ""//新增单选题模板代码
            str += '<div class="questionItem">'
            str += '    <div class="questionCon">'
            str += '        <span class="questionNum">Q&nbsp;' + (result[i].num) + '</span> &nbsp;&nbsp;<span>' + (result[i].title) + '</span>'
            str += '        <ul>'
            for (j = 0; j < result[i].radio.len; j++)
                str += '        <li class="radios"><span>' + (result[i].radio[j]) + '</span></li>'
            str += '        </ul>'
            str += '    </div>'
            str += '    <div class="questionData">'
            str += '        <span>数据占比</span>'
            str += '        <ul>'
            for (j = 0; j < result[i].radio.len; j++) {/* 循环添加问卷问题选项 */
                var per = Number(result[i].data[j] / result[i].data.len * 100).toFixed(1)//计算问题选项被选择的概率
                if (result[i].data[j] == 0)
                    per = 0
                str += '        <li class="radios">'
                str += '            <div class="dataItem"></div><span>' + (per) + '%</span>'
                str += '            <div id="dataRad' + (result[i].num) + (j + 1) + '" class="dataItemUp"></div>'
                str += '        </li>'
            }
            str += '        </ul>'
            str += '    </div>'
            str += '</div>'
            var content = document.querySelector("#body").innerHTML/* 先获取问题标签的所有内容 */
            document.querySelector("#body").innerHTML = content + str//在所有的问题后面插入
            for (j = 0; j < result[i].radio.len; j++) {
                var percentage = Number(result[i].data[j] / result[i].data.len * 250).toFixed(1)
                var perID = "dataRad" + (result[i].num).toString() + (j + 1).toString()
                document.getElementById(perID).style.width = percentage.toString() + "px"//条形图
            }
        } else if (result[i].type == "多选题") {
            var str = ""//新增多选题模板代码
            str += '<div class="questionItem">'
            str += '    <div class="questionCon">'
            str += '        <span class="questionNum">Q&nbsp;' + (result[i].num) + '</span> &nbsp;&nbsp;<span>' + (result[i].title) + '</span>'
            str += '        <ul>'

            for (j = 0; j < result[i].check.len; j++)
                str += '        <li><span>' + (result[i].check[j]) + '</span></li>'

            str += '        </ul>'
            str += '    </div>'
            str += '    <div class="questionData" id="width' + (result[i].num) + '">'
            str += '        <span>数据占比</span>'
            str += '        <div id="dataItem' + (result[i].num) + '"></div>'
            str += '    </div>'
            str += '</div>'
            var content = document.querySelector("#body").innerHTML/* 先获取问题标签的所有内容 */
            document.querySelector("#body").innerHTML = content + str//在所有的问题后面插入
        } else {
            var str = ""//新增多选题模板代码
            str += '<div class="questionItem">'
            str += '    <div class="questionCon">'
            str += '        <span class="questionNum">Q&nbsp;' + (result[i].num) + '</span> &nbsp;&nbsp;<span>' + (result[i].title) + '</span>'
            str += '    </div>'
            str += '    <div class="questionData">'
            str += '        <span>数据占比</span>'
            str += '        <ul>'
            str += '            <li>'

            var per = Number(result[i].data.effect / result[i].data.len * 100).toFixed(1)
            if (result[i].data.effect == 0)
                per = 0
            str += '            <div class="dataItem"></div><span>' + (per) + '%</span>'
            str += '            <div id="dataRad' + (result[i].num) + '" class="dataItemUp"></div>'
            str += '            </li>'
            str += '        </ul>'
            str += '    </div>'
            str += '</div>'
            var content = document.querySelector("#body").innerHTML/* 先获取问题标签的所有内容 */
            document.querySelector("#body").innerHTML = content + str//在所有的问题后面插入
            var percentage = Number(result[i].data.effect / result[i].data.len * 250).toFixed(1)
            var perID = "dataRad" + (result[i].num).toString()
            document.getElementById(perID).style.width = percentage.toString() + "px"//条形图
        }
    }
    for (i = 1; i <= result.len; i++) {
        if (result[i].type == "多选题") {//多选题的饼状图 利用第三方库
            var heightId = "#width" + (result[i].num).toString()
            var hei = document.querySelector(heightId).clientHeight - 21
            var mainID = "dataItem" + (result[i].num).toString()
            var main = document.getElementById(mainID)
            main.style.height = hei.toString() + "px"
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(main);
            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        data: [
                        ],
                    }
                ]
            };
            for (j = 0; j < result[i].check.len; j++) {
                option.series[0].data[j] = { value: result[i].data[j], name: result[i].check[j] }
            }
            console.log(option.series[0].data)
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }

}